<?php include "conn.php";?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo $SiteTitle;?></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
    <meta name="keywords" content="<?php echo $SiteKeywords;?> ">
    <meta name="description" content="<?php echo $SiteDescription;?> " />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <?php include "public/cssjs.php";?>
    <link rel="stylesheet" type="text/css" href="css/product.css" />
</head>
<body>
<?php include "public/top.php";?>
<!--  -->
<div class="main-page">
    <div class="container">
        <div id="shoppingCart">
            <table class="table table-hover table-inverse">
                <thead>
                <tr>
                    <td><input type="checkbox" @click="clickCheckAll" v-model="checked"> 全选</td>
                    <td>商品名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>总价</td>
                    <td></td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in shopping_cart_list">
                    <td><input type="checkbox" name="checked" :value="item.id" v-model="item.checked" autocomplete="off"></td>
                    <td><img style="width:80px;" :src="item.img"></td>
                    <td>${item.name}</td>
                    <td>${item.price}</td>
                    <td>
                        <div class="input-group input-group-sm" style="max-width: 90px;">
                            <div class="input-group-prepend">
                                <button @click="()=>{if(item.number !=1) item.number-= 1}" class="btn btn-outline-secondary" type="button">-</button>
                            </div>
                            <input type="text" v-model="item.number" class="form-control text-center">
                            <div class="input-group-append">
                                <button class="btn btn-outline-secondary" @click="()=>{item.number+= 1}" type="button">+</button>
                            </div>
                        </div>
                    </td>
                    <td>${item.totalPrice}</td>
                    <td><i @click="clickDel(index)" class="iconfont icon-shanchu"></i></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="3"><input type="checkbox" @click="clickCheckAll" v-model="checked"> 全选</td>
                    <td class="text-right" style="cursor: pointer;" colspan="1" @click="location.reload(true)">刷新列表 </td>
                    <td class="text-right" style="cursor: pointer;" colspan="2" @click="clickEmpty">全部清空 </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!--  -->


<?php include "public/footer.php";?>
<?php include "public/bottom.php";?>
<script type="text/javascript">
    // 模板引擎的数据写着里
    var Tdata = {
        checkAll: [],
        checked: [],
        shopping_cart_list: [
            { id: '11', img: 'images/home-news-img1.jpg', name: 'HEMNES 汉尼斯床品四件套', price: '￥200.00', number: 2, totalPrice: '$400' },
            { id: '22', img: 'images/home-news-img1.jpg', name: 'HEMNES 汉尼斯床品四件套', price: '￥200.00', number: 2, totalPrice: '$400' },
            { id: '33', img: 'images/home-news-img1.jpg', name: 'HEMNES 汉尼斯床品四件套', price: '￥200.00', number: 2, totalPrice: '$400' },
            { id: '44', img: 'images/home-news-img1.jpg', name: 'HEMNES 汉尼斯床品四件套', price: '￥200.00', number: 2, totalPrice: '$400' },
        ]
    };
</script>
<script type="text/javascript" src="js/shoppingCart.js"></script>
</body>

</html>